import { Button, Divider, Form, SideSheet ,Notification} from "@douyinfe/semi-ui";
import { Add } from "../../../services/TokenService";


interface CreateTokenProps {
    onSuccess: () => void;
    visible: boolean;
    onCancel: () => void;
}

export default function CreateToken({
    onSuccess,
    visible,
    onCancel
}: CreateTokenProps) {

    function handleSubmit(values: any) {
        Add(values).then(() => {
            Notification.open({
                type: 'success',
                title: '创建成功',
                duration: 3,
            })
            onSuccess();
        }).catch((error) => {
            Notification.open({
                type: 'error',
                title: '创建失败',
                duration: 3,
            })

        })
    }

    return <SideSheet title="创建Token" visible={visible} onCancel={onCancel}>
        <Divider></Divider>
        <Form onSubmit={values => handleSubmit(values)} style={{ width: 400 }}>
            {/* @ts-ignore */}
            {({ formState, values, formApi }) => (
                <>
                    <Form.Input field='name' rules={[{
                        required: true,
                        message: '请输入token名称'
                    }]} trigger='blur' label='Token名称' style={{ width: '100%' }} placeholder='请输入您的token名称'></Form.Input>
                    <Form.Input field='remainQuota' trigger='blur' initValue={10000} label='使用额度' style={{ width: '100%' }} placeholder='请输入您的额度'></Form.Input>
                    <Form.Checkbox field='unlimitedQuota' initValue={false} trigger='blur' noLabel>是否无限额度</Form.Checkbox>
                    <Form.DatePicker field='expiredTime' label='过期时间' style={{ width: '100%' }}></Form.DatePicker>
                    <Button block type='primary' htmlType='submit'>提交</Button>
                </>
            )}
        </Form>
    </SideSheet>
}